<template>
	<view class="bigView">
		<!-- <view style="width: 100%;display: flex;justify-content: center;color:black;font-weight: bold">需要开放端口</view> -->
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<view class="topView">
				<view
					class="clockItem"
					v-for="(item, index) in dataList"
					:key="index">
					<view class="rightView">
						<view style="margin-top: 10px;font-size: 16px;font-weight: bold;color: black;">人脸识别通过提醒</view>
						<view style="display: flex;flex-direction: row;margin-top: 5px;">
							<view class="rightSubTitle">人员姓名：</view>
							<view class="rightSubTitle" style="color: black;">{{item.realName}}</view>
						</view>
						<view style="display: flex;flex-direction: row;">
							<view class="rightSubTitle">通行设备：</view>
							<view class="rightSubTitle" style="color: black;">{{item.trafficEquipment}}</view>
						</view>
						<view style="display: flex;flex-direction: row;margin-bottom: 10px;">
							<view class="rightSubTitle">通行时间：</view>
							<view class="rightSubTitle" style="color: black;">{{item.transitTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import jiaRenReport from '@/api/jiaRenReport.js'
	export default{
		components:{
			
		},
		data(){
			return {
				bottom:0,
				indexList:[1,2,3,4,5,6,7,8,9,10],
				dataList:[]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		methods:{
			scrolltolower() {
				// this.loadmore()
			},
			queryList(pageNo, pageSize) {
				jiaRenReport.getCheckRecordList({page:pageNo,size:pageSize}).then(res =>{
					let records = res.records;
					if(pageNo==1){
						this.dataList = records;
					}else{
						this.dataList.concat(records)
					}
					this.$refs.paging.complete(res.records);
				}).catch(error =>{
					this.$refs.paging.complete(false);
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	// justify-content: center;
}
.clockItem{
	width: calc(100vw - 32px);
	margin-left: 16px;
	min-height: 96px;
	border-radius: 12px;
	background-color: white;
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}
.leftIcon{
	width: 36px;
	height: 36px;
	margin-left: 20px;
	margin-top: 24px;
}
.rightView{
	// flex-grow: 1;
	display: flex;
	height: 100%;
	flex-direction: column;
	// align-items: center;
	justify-content: center;
	// background-color: red;
	margin-left: 12px;
	.rightTitle{
		color: #11C770;
		font-size: 16px;
	}
	.rightSubTitle{
		color: #585858;
		font-size: 14px;
		margin-top: 6px;
	}
}

.bottomView{
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
}
</style>